Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreTodo jQuery... de novato a experto
Rating: 4.7 out of 54.7(149 ratings)
10,280 students
What you'll learn
- Tener conocimiento de las funciones de jQuery
- Instalar la librería jQuery en su computadora
- Aplicar diferentes formas de seleccionar los elementos HTML para modificarlos, eliminarlos o crear nuevos
- Conocer los diferentes métodos dentro de jQuery.
- Curso completo de jQuery
- Curso completo de jQuery UI
- Curso completo de aplicaciones con jQuery
- Curso completo de jQuery Mobile
Explore related topics
Course content
47 sections • 228 lectures • 26h 34m total length
- Bienvenido al curso3:35
- Primeros pasos con jQuery15:19La librería JavaScript más utilizada en el mundo en jQuery, porque nos da una sorprendente potencia para programar páginas dinámicas compatibles con todos los navegadores,!hasta con Internet Explorer!
- Hola, mundo10:43En este curso revisaremos desde la instalación de la librería, su conexión a las páginas html, su sintaxis básica, los selectores, los eventos para manejar el ratón, el teclado y eventos del sistema.
- ¿Dónde escribir el código?6:24También analizaremos los efectos como slide, animate, fadein entre muchos otros. entre muchas otras funcionalidades, como cambiar una clase o una propiedad CSS, añadir o borrar elementos HTML y modificar las dimensiones de un evento.
- Arcvhivos del curso0:02
En esta clase podrá descargar los archivos del curso.
- Introducción a jQuery
- Crear clases CSS en tiempo de ejecución9:48Uno de los puntos más fuertes en los jQuerys, es el hecho que podemos mdificar las clases de estilos en cascada en tiempo de ejecución. Es decir, recibir o detectar un evento y modificar el estilo de algún elemento de la página, lo cual nos dará enormes posibilidades de desarrollar efectos impactantes y a la vez ligeros.
- Seleccionar una etiqueta y el selector "this"6:29Otro punto muy importante (por eso se llama J-Query o querys para JavaScript) es el hecho que podemos seleccionar cualquier elemento dentro de la estructura DOM y manipularlo a nuestro antojo.
- Seleccionar un objeto por medio de un atributo6:56Otra enorme herramienta de programación será el poder seleccionar a uno o más elementos del documento DOM por medio de algún argumento dentro de la etiqueta del elemento. No olvide bajar las imágenes y el archivo html para realizar este ejercicio.
- El método ready5:42El evento ready() nos permitirá sincronizar nuestro código cuando los elementos de la página hayan terminado de crearse. Es el equivalente al evento onload() que se ejecuta en JavaScript
- El selector universal, asterisco (*)3:53Si deseamos modificar a todos los elementos de un documento DOM, contamos con el comodín asterisco (*) con el cual podremos modificar a todo el documento.
- Seleccionar una etiqueta con una clase CSS6:02También podemos crear clases de estilos en cascada y asociarla a un elemento en tiempo de ejecución, es decir, puede ser que la regla no exista y crearla por medio de un controlador de evento o listener, ya sea por medio de un botón o el movimiento del cursor del ratón.
- Seleccionar el primer elemento con first4:33Otro selector de elementos, que nos puede ser de mucha utilidad, es el de first, el cual, como su nombre nos lo indica, selecciona el primer elementos de una lista o de un conjunto de párrafos.
- Seleccionar entre elementos pares y nones4:55Otros selectores, que nos permitirá manejar, por ejemplo, tablas o listas, es de pares y nones, lo cual nos permite alternar estilos. No olvide bajar la tabla que se anexa al video para que realice su ejercicio.
- Selectores en jQuery
- Los eventos click y dblclick5:47Una de las enormes ventajas que tenemos con jQuery son los eventos. Dos de ellos, que funcionan a la perfección, son el click y el doble click, que lo podemos aplicar a cualquier elemento del documento, como puede ser una imagen, un párrafo o una tabla.
- Los eventos mouseenter y mouseleave3:44Otros eventos que son muy utilizados en las animaciones y efectos que podemos realizar con jQuery son mouseenter y mouseleave, que nos permiten realizar efectos "rollover" y "rollout". Estos efectos los podemos aplicar tanto en imágenes, textos y otros elementos del documento.
- Los eventos mousedown y mouseup3:57Los eventos mousedown y mouseover nos permitirán detectar cuando el apuntador del ratón izquierdo está abajo o cuando arriba. Con ellos podremos hacer muchos efectos interesantes, ya que los podemos aplicar a cualquier elemento de la página.
- El evento hover4:13
El método hover() toma dos funciones tipo callback y es la combinación de los métodos mouseenter() y mouseleave().
La primer función se ejecuta cuando el apuntador del ratón entra al elemento HTML y la segunda función se activa cuando el apuntador del ratón sale del elemento.$("#p1").hover(function(){
alert("Entró!");
},
function(){
alert("Salió!");
}); - Los eventos focus y blur3:51
Focus
El evento focus() se dispara cuando el apuntador del ratón entra a una caja de un formulario HTML. La función se ejecuta cuando tenemos el "foco" sobre el campo:
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});Blur
El evento blur() se dispara cuando el apuntador del ratón sale de una caja de un formulario HTML. La función se ejecuta cuando perdemos el "foco" sobre el campo:
$("input").blur(function(){
$(this).css("background-color","#ffffff");
}); - Los eventos keydown y keyup5:41
keydown()
El evento keydown() se dispara cuando pulsamos una tecla dentro de una caja de un formulario HTML.
$("input").keydown(function(){
$("input").css("background-color","yellow");
});keyup()
El evento keyup() se dispara cuando levantamos la tecla de una caja de un formulario HTML.
$("input").keydown(function(){
$("input").css("background-color","#ffffff");
}); - Eventos en jQuery
- Ocultar y mostrar con show y hide5:20Dentro de los efectos con los que contamos en jQuery, se encuentra el de mostrar y oculpar cualquier elementovisual del documento DOM. Podremos hacer en forma sencilla animaciones que serían imposibles con sólo HTML.
- Ocultar y mostrar con toggle4:25El efecto de toggle nos permitirá ocultar y mostrar un elemento del documento DOM de manera muy sencilla, permitiéndonos hacer efectos interesantes con muy poco código.
- Desvanecido con fadeIn, fadeOut7:04También contamos con el efecto de desvanecimiento, conocidos como fade-in y fade-out. Como parámetro podemos indicarle la velocidad del efecto con parámetros "slow" y "fast", asi como en número de milisegundos.
- Efecto slideUp y slideDown6:02Otro efecto que podremos realizar con casi nada de código, es del deslizamiento de cualquier elemento hacia arriba y hacia abajo. Al igual que los otros efectos, podremos controlar su velocidad con los parámetos "slow" y "fast", asi como manejar el tiempo en milisegundos.
- Efecto animate5:52El efecto animate es uno de los más poderosos en jQuery, pode podemos tomar una o varias atributos de un elementos y animarlos.
- Efecto animate con varias propiedades7:16
Con el efecto animate pomeos animar más de una propiedad. De hecho podemos animar casi cualquier propiedad, a excepción de la propiedad de color, donde necesitamos otra librería. Si deseamos animar alguna propiedad css con guión, por ejemlo padding-top, la tenemos que convertir a CamelCase, como paddingTop.
- Efecto animate valores relativos6:30El efecto animate lo podemos manejar con valores relativos, es decir, pequeños incrementos que se pueden sumar o restar cuando tenemos alguna propiedad numérica. Usaremos los operadores += para incrementar y -= para decrementar.
- Efecto animate en una pila o queue6:08Por medio del método animate, podemos tener una pila de animaciones y jQuery las ejecutaría de una por una, con lo cual podemos hacer animaciones más elaboradas.
- Detener una animación con stop6:55El método stop(), en jQuery, se utiliza para detener una animación o efecto antes de que se termine.
El método stop () funciona para todas las funciones de efectos jQuery, incluyendo animaciones de deslizamiento, la decoloración ylas animaciones customizadas.
El parámetro opcional (StopAll) especifica si también la cola de animación debe ser detenida o no. El valor predeterminado es falso, lo que significa que sólo la animación activa se detendrá, permitiendo que las animaciones en cola para ser realizado posteriormente.
El parámetro opcional goToEnd especifica si o no para completar la animación actual inmediatamente. El valor predeterminado es false.
Así que, por defecto, el método stop () mata a la animación actual que se realiza en el elemento seleccionado. - Funciones de callback en animaciones5:26Todos los efector tienen como parámetro una función de callback, la cual se ejecuta cuando el efecto termina, con la cual podemos enlazar varios efectos, haciendo efectos más elaborados de manera muy sencilla e intuitiva.
- Encadenamiento de métodos y animaciones7:05Por lo general escribimos las sentencias jQuery una a la vez (una después de la otra).
Sin embargo, existe una técnica llamada encadenamiento, que nos permite ejecutar varios comandos con jQuery, uno tras otro, en el mismo elemento o elementos.
Sugerencia: De esta manera, los navegadores no tienen que encontrar el mismo elemento más de una vez.
Para encadenar una acción, sólo tiene que añadir la acción a la acción anterior y unirlas por medio de un punto.
Cuando encadenamos métodos en jQuery, la línea de código puede ser bastante larga. Sin embargo, jQuery no es muy estricto acerca de la sintaxis: puede darle formato como usted desee, incluyendo saltos de línea y sangrías. - jQuery básico: efectos
- Leer y escribir texto con text()5:11Una parte muy importante de jQuery, es la posibilidad de manipular el DOM.
jQuery viene con un montón de métodos DOM relacionados, lo que hace que sea fácil de acceder y manipular los elementos y atributos en cualquier página web.Leer el contenido - text (), html () y val()
Tres simples, pero útiles, métodos jQuery para la manipulación de DOM son:
text () - Establece o devuelve el contenido de texto de los elementos seleccionados
html () - Establece o devuelve el contenido de los elementos seleccionados (incluyendo el formato HTML)
val () - Establece o devuelve el valor de los campos del formulario - Leer y escribir código HTML4:04
Aunque ya tenemos en JavaScript una función similar (innerHTML) en jQuery tenemos el método html() que nos permite leer y escribir el código html de un objeto dentro del DOM.
Este método no funciona para documentos XML.
Si el selector regresa más de un elemento, sólo el primer elemento regresa su código HTML.
Esta función puede presentar algunos problemas con el navegador Internet Explorer, en versiones antigüas, ya que se basa en el comando innerHTML de JavaScript:
- Modificar los atributos con el método attr()6:00
Desde jQuery, podemos modificar a nuestro gusto cualquier valor de cualquier etiqueta de un documento DOM en tiempo de ejecución. Primero debemos identificar el objeto, ya sea por medio de un identificador, etiqueta o clase, y luego utilizar el método attr().
Si el selector regresa más de un elemento, sólo se modificará el primero.
- Leer el valor de un campo de texto con val()3:34Otra forma que tiene el jQuery para interactura con HTML es que podemos leer y escribir en las cajas de texto de los formularios. Esto lo realizamos por medio de método val().
- Escribir en una caja de texto con val()3:24Otra de las funciones que tiene el método val() es poder escribir en cajas de texto (input) dentro de las formas. No solo podemos leer y escribir en las cajas de input, si no en cualquier elemento de una forma.
- Leer los resultados de un combo por medio del método val()7:52El método val() nos permite leer inforación de los comobo box, ya sea que nos regrese un sólo valor
. En este último caso, necesitamos interpretar el resultado como un arreglo. Si ningún valor ha sido seleccionado, regresa un valor null. - jQuery básico: manejo del HTML
- Añadir texto por medio del método append()6:37
Por medio de la función apena() añadiremos texto al final de un elemento con texto existente.
- Añadir texto al inicio de un objeto con prepend()4:53Asi como tenemos el método append(), que añade texto al final de un párrafo, tenemos el método prepend() para añadirlo al inicio. Aunque es un poco menos común su uso, aqui ponemos un ejemplo del mismo:
- Añadir elementos con after() y before()7:31Otra funcionalidad muy práctica en jQuery es que podemos añadir elementos antes y depués de otro elemento encontrado. esto lo podemos hacer por medio de los métodos after() y before(). En el siguiente ejemplo añadiremos un párrafo, un botón y una imagen, los cuales no existen en la página inicial:
- Eliminar elementos con remove() y empty()5:21
Existen dos métodos en jQuery que nos permiten eliminar elementos de una página web. Estos son:
- remove(): Elimina los subnodos y el nodo contenedor.
- empty(): Elimina los subnodos o elementos hijos, pero no al contenedor. Sólo lo vacía.
- Manipular los estilos en cascada con addClass()4:50Una herramienta formidable para hacer nuestras páginas dinámicas es el poder añadir estilos en cascada en tiempo de ejecución. Para ello contamos con el comando addClass().
- Remover los estilos de un elemento con removeClass()5:52Otro método que nos va a hacer de mucha utilidad es poder eliminar clases completas de un elemento del documento DOM, ya sea en tiempo de ejecución o en tiempo de autor. Para ello utilizamos el método removeClass().
- jQuery básico: DOM manipulación de nodos
- Introducción al manejo de dimensiones con jQuery2:47El manejo de las dimensiones del modelo de caja en jQuery es muy claro, ya que cada una de las dimensiones tiene su propio método, simplificándonos la vida, al contrario de HTML, que parece un tema para iniciados.
- Los métodos para manejar las dimensiones del modelo de caja3:28
- width(): el ancho del elemento sin padding, border ni margen.
- height(): la altura del elemento sin padding, border ni margen.
- innerWidth(): el ancho del elemento con el padding,pero sin el border ni margen.
- innerHeight(): la altura del elemento con el padding,pero sin el border ni margen.
- outerWidth(): el ancho del elemento con el padding y el borde, pero sin el margen.
- outerHeight(): la altura del elemento con el padding y el borde, pero sin el margen.
- outerWidth(true): el ancho del elemento con el padding, el borde y el margen.
- outerHeight(true): la altura del elemento con el padding, el borde y el margen.
- Modificar las dimensiones por medio de width y height3:47Podemos cambiar las dimensiones de un elemento en web por medio de los métodos width y height, asi como cambiar dichos atributos por medio del métod attr. Estos métodos no tienen un efecto de animación.
- jQuery básico: Modificar las dimensiones
- jQuery y AJAX6:16AJAX es un conjunto de tecnologías tradicionales, como el JavaScript, el HTML y el XML, para crear aplicaciones asíncronas. Es el acrónimo de Asynchronous JavaScript And XML. Esta tecnología permite mandar y recibir información (entiéndase datos) desde el background del navegador por medio del objeto XMLHTTPRequest, el cual se encuntra implementado desde 2004 en todos los principales navegadores (incluso en Internet Explorer).
- Cargar archivos de texto con load()6:03
El método load() es simple, pero poderoso. Nos permitirá leer una archivo en el servidor (en este caso de texto) y ponerlo en cualquier elemento de nuestra página.
Su sintaxis básica es:
$(selector).load(URL,data,callback);
- La función de callback en la carga de texto con load()4:51
En la función load(), que nos sirve para cargar archivos externos, tendremos un segundo parámetro, que es una función quese ejecuta automáticamente cuando el proceso de carga termina. Estas funciones son mejor conocidas como "callback".
En esta función tendremos tres parámetros:
- respuesta- contiene el resultado de la carga, si esta fue exitosa
- estado -regresa una cadena con el estado de la carga: "success" o "error"
- xhr - contiene el objeto XMLHttpRequest
- El comando GET en jQuery4:29
Con los métodos get y post podremos solicitar información a una página de internet que utiliza algun lenguaje intermedios en el servidor, como pueden ser PHP, Coldfusion o ASP.
- GET - Solicita la información de una página determinada. Puede quedar la información en la memoria caché del navegador.
- POST - Envía la información a ser procesada. Nunca se guarda en memoria caché la información
- El método POST para enviar parámetros desde jQuery6:03
El método pos enviía la información por medio de los bloques Multipurpose Internet Mail Extensions o MIME (en español "extensiones multipropósito de correo de internet") y en jQuery nunca guarda la información en el caché del navegador.
El primer parámetro que ncesitamos es la URL, posteriormente se envían los parámetros como si ffueran un objeto hecho al vuelo (con llaves) y porteriormente, y de forma opcional, tenemos una función de callback que se ejecuta scuando se termina la carga de nuestro archivo. - El método ajax()8:36Para tener completo control en el envío y recepción de datos, podemos utilizar el método ajax(), el cual es más completo, pero al tener tantos parámetros (32 parámetros opcionales, algunos de los cuales ya están desactualizados) se recomienda mejor utilizar métodos como load(), post() o get(). Aqui se da un ejemplo de cómo utilizar los principales parámetros:
- jQuery básico: Ajax
- Creación de las etiquetas HTML para la galería8:59En este video daremos los primeros pasos, construyendo las divisiones HTML para nuestra galería.
- Creación de los estilos en cascada para la galería7:18Ahora realizaremos los estilos en cascada para estructurar la galería.
- Creación del carrusel de imágenes con javaScript9:57En este video haremos el carrusel de imágenes auxiliados de las instrucciones en JavaScript. Las transiciones las efecturesmo con jQuery.
- Programación de los botones de las fotos8:33Programaremos los botones de las imágenes para poder saltar la selección de las mismas por medio de los eventos de jQuery
- Programación de las flechas adelante y atras11:10Programaremos con jQuery las flechas para avanzar y retroceder en la galería
- Agregar textos y últimos toques a la galería10:42Agregaremos textos para cada uno de las imágenes
- Conclusión de la galería2:23Por último, añadiremos los toques finales y daremos algunas conclusiones sobre posibles cambios de la galería desarrollada.
- Separar los elementos de la página principal7:34
Por medio de jQuery podremos hacer introducciones a las páginas, con animaciones e interactividad, como se hacía con Abode Flash, ¿recuerdas?
- Iniciar la animación6:10
En este video separaremos los elementos visuales que vamos a animar, de aquellos que no los animaremos.
- Concluir la animación e iniciar la página9:16
Con este video concluimos la animación de entrada, cuando cargamos la aplicación HTML tradicional.
Requirements
- Tener conocimientos básicos de HTML, JavaScript y CSS
- El alumno aprenderá a instalar la librería jQuery en su computadora
Description
Actualizado a la versión 3.7.x. La librería JavaScript más utilizada en el mundo es jQuery, porque nos da una sorprendente potencia para programar páginas dinámicas compatibles con todos los navegadores, !hasta con Internet Explorer!
En este curso revisaremos desde la instalación de la librería, su conexión a las páginas html, su sintaxis básica, los selectores, los eventos para manejar el ratón, el teclado y eventos del sistema.
Estudiaremos la forma de modificar las dimensiones del modelo de caja de los elementos HTML con los métodos (mas intuitivos de jQuery) y poder cargar archivos planos o ejecutar archivos de lenguaje de servidor, como PHP.
También analizaremos los efectos como slide, animate, fadein entre muchos otros. entre muchas otras funcionalidades, como cambiar una clase o una propiedad CSS, añadir o borrar elementos HTML y modificar las dimensiones de un evento.
Incluye cuatro cursos:
jQuery básico o "core"
jQuery por ejemplos
jQuery UI (user interface)
jQuery mobile (para dispositivos móviles)
y ejemplos para hacer:
Una galería de imágenes
Una galería 3D
Un juego de memoria
Juegos de arratrar y soltar
Un drop-menu
Un tooltips con imágenes
Efectos de rollovers
Actualizado a la versión jquery 3.7 (11 de mayo de 2024)
Who this course is for:
- Desarrolladores y diseñadores de páginas web